<template>
  <div class="cart-card">
    <div class="cart-img" @touchend.capture="goGoodsPron" @touchstart.capture="touchStart">
      <img src="@/assets/clothing.webp" alt="商品图片" />
    </div>
    <div class="card-info">
      <div class="title">{{ cartData.cardTitel }}</div>
      <div class="money">
        <div class="price">￥{{ cartData.price }}</div>
        <div class="quantity">销量{{ cartData.quantity }}+</div>
      </div>
      <div class="tags">
        <div v-for="(item, i) in cartData.tags" :key="i">{{ item }}</div>
      </div>
      <div class="address van-ellipsis">{{ cartData.address }}</div>
      <div class="count">
        <div class="subtract">
          <van-icon name="minus" size="20" @click="cardSetCount(cartData.id, -1)" />
        </div>
        <div class="count-number">{{ isNum ? num : 0 }}</div>
        <div class="push">
          <van-icon name="plus" size="20" @click="cardSetCount(cartData.id, 1)" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    cartData: Object,
    num: Number,
  },
  data() {
    return {
      isNum: true,
      X: 0,
      Y: 0,
    };
  },
  methods: {
    //确定手指初始位置
    touchStart(e) {
      const start = e.changedTouches[0];
      this.X = start.pageX;
      this.Y = start.pageY;
    },
    //跳转商品详情页
    goGoodsPron(e) {
      const start = e.changedTouches[0];
      const moveX = this.X - start.pageX;
      const moveY = this.Y - start.pageY;
      if (moveX > 20 || moveX < -20 || moveY > 30 || moveY < -30) return;
      this.$router.push({ path: "/goodspron", query: { id: this.cartData.id } });
    },
    //商品加减
    cardSetCount(id, num) {
      this.$store.commit("localNumList", { id, num });
      if (this.num === 1 && num === -1) {
        this.isNum = false;
        this.$emit("renovate");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/css/CartCard.scss";
</style>
